import { memo, useState } from 'react'
import styles from './index.module.scss'
import { useTitle } from 'ahooks'
import { Typography, Table, Tag, Button, Space, Modal, message } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import ListSearch from '@/components/ListSearch'
import { questionType } from '@/types/enum'
import ListPage from '@/components/ListPage'

import { api_updateQuestionById, api_deleteQuestionBatch } from '@/api'
import { useRequest } from 'ahooks'

import useQuestionDataList from '@/hooks/useQuestionListData'

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '是否发布',
    dataIndex: 'isPublished',
    render: (isPublished: boolean) => {
      return isPublished ? <Tag color="#2db7f5">已发布</Tag> : <Tag>未发布</Tag>
    },
  },
  {
    title: '答卷数量',
    dataIndex: 'answerCount',
  },
  {
    title: '创建时间',
    dataIndex: 'creatAt',
  },
]

const List = memo(() => {
  useTitle('回收站')
  const { Title } = Typography
  const [selectedIds, setSelectedIds] = useState<string[]>([])

  const [modal, contextHolder] = Modal.useModal()

  const delHandle = () => {
    modal.confirm({
      icon: <ExclamationCircleOutlined />,
      content: '彻底删除后无法恢复，是否确认删除？',
      onOk: handleDel,
    })
  }

  const { loading, list, total, refresh } = useQuestionDataList({
    type: questionType.trash,
  })

  // 撤销删除
  const { run: handleRecovery } = useRequest(
    async () => {
      for await (const id of selectedIds) {
        await api_updateQuestionById(id, { isDelete: false })
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess: () => {
        message.success('恢复成功')
        refresh()
        setSelectedIds([])
      },
    }
  )

  // 彻底删除
  const { run: handleDel } = useRequest(async () => await api_deleteQuestionBatch(selectedIds), {
    manual: true,
    debounceWait: 500,
    onSuccess: () => {
      message.success('删除成功')
      refresh()
      setSelectedIds([])
    },
  })

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {
          <>
            <div style={{ marginBottom: '16px' }}>
              <Space>
                <Button onClick={handleRecovery} type="primary" disabled={selectedIds.length <= 0}>
                  恢复
                </Button>
                <Button danger disabled={selectedIds.length <= 0} onClick={delHandle}>
                  彻底删除
                </Button>
              </Space>
            </div>
            <Table
              pagination={false}
              loading={loading}
              dataSource={list}
              columns={columns}
              rowKey={record => record._id}
              rowSelection={{
                type: 'checkbox',
                onChange: keys => {
                  setSelectedIds(keys as string[])
                },
              }}
            />
          </>
        }

        {contextHolder}
      </div>
      <div className={styles.footer}>{!loading && total > 0 && <ListPage total={total} />}</div>
    </>
  )
})

export default List
